<template>
  <el-dialog v-model="dialogVisible" width="85vw" alignCenter title="订单列表" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <base-load-page :loadState="false" class="base-load-page">
      <div class="page-content">
        <el-table ref="elTableRef" v-loading="baseData.loading" border height="100%" :data="tableData" showOverflowTooltip stripe style="width: 100%">
          <template #empty>
            <base-empty :description="description" :pageLoadButton="[{ text: '重新加载', callBack: () => getAxiosData() }]"></base-empty>
          </template>
          <el-table-column
            fixed
            type="index"
            :index="(index: number) => (filterData.current - 1) * filterData.size + index + 1"
            label="编号"
            sortable
            width="60"
            align="center"
            headerAlign="center"
          ></el-table-column>
          <el-table-column label="昵称" fixed prop="nickname" minWidth="180"></el-table-column>
          <el-table-column label="注册时间" prop="registerTime" minWidth="180"></el-table-column>
          <el-table-column label="短剧" prop="dramaTitle" minWidth="180"></el-table-column>
          <el-table-column label="小程序平台" prop="orderPlatform" minWidth="100">
            <template #default="{ row }">
              <el-tag v-if="row.orderPlatform === 'mp-kuaishou'" key="el-tag-1" size="small">快手</el-tag>
              <el-tag v-else-if="row.orderPlatform === 'mp-toutiao'" key="el-tag-2" type="warning" size="small">抖音</el-tag>
              <el-tag v-else-if="row.orderPlatform === 'mp-weixin'" key="el-tag-3" type="success" size="small">微信</el-tag>
              <el-tag v-else key="el-tag-4" type="danger" size="small">未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单号" prop="outTradeNo" minWidth="220"></el-table-column>
          <el-table-column label="订单金额" prop="totalAmount" minWidth="130"></el-table-column>
          <el-table-column label="订单类型" prop="orderType" minWidth="160">
            <template #default="{ row }">
              {{ orderTypeOptions.find((v) => v.value === row.orderType)?.label || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="首/复冲" prop="firstOrRepeatRecharge" minWidth="80">
            <template #default="{ row }">
              {{ row.firstOrRepeatRecharge === 0 ? '首充' : row.firstOrRepeatRecharge === 1 ? '复冲' : '未知' }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" prop="status" minWidth="100">
            <template #default="{ row }">
              <div v-if="row.status === -1" class="abnormal order-status">异常</div>
              <div v-else-if="row.status === 0" class="order-status pending-payment">待支付</div>
              <div v-else-if="row.status === 1" class="order-status paid">已支付</div>
              <div v-else-if="row.status === 2" class="order-status payment-failed">支付失败</div>
              <div v-else-if="row.status === 3" class="order-status refunded">已退款</div>
              <div v-else-if="row.status === 4" class="closed order-status">已关闭</div>
              <div v-else class="order-status unknown">未知</div>
            </template>
          </el-table-column>
          <el-table-column label="支付渠道" prop="payChannel" minWidth="100">
            <template #default="{ row }">
              {{ orderPayChannelOptions.find((v) => v.value === row.payChannel)?.label || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="订单创建时间" prop="createTime" minWidth="180"></el-table-column>
          <el-table-column label="订单支付时间" prop="tradeTime" minWidth="180"></el-table-column>
        </el-table>
      </div>
      <template #foot>
        <div class="pagination-box">
          <el-pagination
            v-model:currentPage="filterData.current"
            v-model:pageSize="filterData.size"
            :pageSizes="[20, 30, 40, 50]"
            :disabled="baseData.loading"
            :pagerCount="13"
            layout="total, prev, pager, next, sizes, jumper"
            :total="baseData.total"
            @change="getAxiosData(true)"
          ></el-pagination>
        </div>
      </template>
    </base-load-page>
  </el-dialog>
</template>

<script setup lang="ts">
  import { type AppUserSavings, orderPayChannelOptions, orderTypeOptions } from '@/api/app-user-management';
  import { type OrderByConditionRequest, getOrderByCondition } from '@/api/ledger-management.ts';

  const elTableRef: $RefComp<'ElTable'> = ref(null);
  const baseData = shallowReactive({
    type: 'add' as 'add' | 'edit',
    /** 加载状态 */
    loading: true,
    /** 总数量 */
    total: 0,
  });
  const filterData = ref<OrderByConditionRequest>({
    dramaIds: [],
    startDate: '',
    endDate: '',
    condition: undefined,
    range: -1,
    current: 1,
    size: 40,
    investmentChannel: '',
  });
  const tableData: Ref<AppUserSavings[]> = ref([]);
  const description = ref('');

  /**
   * 设置表格数据
   */
  async function getAxiosData(showLoading = true) {
    try {
      await nextTick();
      baseData.loading = Boolean(showLoading);
      const res = await getOrderByCondition(filterData.value);
      tableData.value = res.data.records;
      description.value = '暂无数据';
      // filterData.value.current = res.data.current;
      // filterData.value.size = res.data.size;
      baseData.total = res.data.total;
      baseData.loading = false;
    } catch (error) {
      baseData.loading = false;
      tableData.value = [];
      description.value = error.msg || '加载失败，-BD001';
    }
  }

  const dialogVisible = ref(false);

  /**
   * 显示
   */
  function show(params: Omit<OrderByConditionRequest, 'current' | 'size'>) {
    filterData.value.dramaIds = params.dramaIds;
    filterData.value.startDate = params.startDate;
    filterData.value.endDate = params.endDate;
    filterData.value.condition = params.condition;
    filterData.value.range = params.range;
    filterData.value.investmentChannel = params.investmentChannel;
    getAxiosData();
    dialogVisible.value = true;
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .base-load-page {
    height: 80vh !important;
  }

  .pagination-box {
    @include flex(row, nowrap, center, center, center);
    padding-top: 15px;
  }

  .head-box {
    @include flex(row, nowrap, flex-start, center, center);

    .left-box {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      gap: 14px;
      margin-right: 15px;
    }
  }

  .page-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .order-status {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 7px;
    font-size: 12px;
    line-height: 12px;
    color: #ffffff;
    border-radius: 5px;

    /* 异常状态 */
    &.abnormal {
      color: var(--el-color-danger);
      background-color: var(--el-color-danger-light-9);
      border: 1px solid var(--el-color-danger-light-5);
    }

    /* 待支付状态 */
    &.pending-payment {
      color: var(--el-color-warning);
      background-color: var(--el-color-warning-light-9);
      border: 1px solid var(--el-color-warning-light-8);
    }

    /* 已支付状态 */
    &.paid {
      color: var(--el-color-success);
      background-color: var(--el-color-success-light-9);
      border: 1px solid var(--el-color-success-light-8);
    }

    /* 支付失败状态 */
    &.payment-failed {
      color: var(--el-color-danger);
      background-color: var(--el-color-danger-light-9);
      border: 1px solid var(--el-color-danger-light-8);
    }

    /* 已退款状态 */
    &.refunded {
      color: var(--el-color-violet);
      background-color: var(--el-color-violet-light-9);
      border: 1px solid var(--el-color-violet-light-8);
    }

    /* 已关闭状态 */
    &.closed {
      color: var(--el-color-info);
      background-color: var(--el-color-info-light-9);
      border: 1px solid var(--el-color-info-light-8);
    }

    /* 未知状态 */
    &.unknown {
      color: var(--el-color-cyan);
      background-color: var(--el-color-cyan-light-9);
      border: 1px solid var(--el-color-cyan-light-8);
    }
  }

  .content-wrap {
    white-space: wrap;
  }
</style>
